.je-editor-draw{
  height:100%;
  border-top: 1px solid @border-color-base !important;
  border-bottom: 1px solid @border-color-base !important;
  border-left: 1px solid @border-color-base !important;
  border-right:0 !important;
 .ant-collapse .ant-collapse-item .ant-collapse-header {
    padding: 5px 16px !important;
    background: #f7f9fc !important;
}
.editor-draw-left-bar{
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}
.je-panel-body .je-panel-wrapper .je-panel-item-region-default{
  overflow: hidden;
}
.left-title{
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #d9d9d9;
  background: #f7f9fc !important;
  &.synergia{
    border-top: 1px solid #d9d9d9;
  }
}
.je-editor-draw-sidebar{
  border-right: 1px solid @border-color-base;
}
.je-editor-draw-body{
  border-left: 1px solid @border-color-base;
  position: relative;
  .editor-draw-toolbar{
    height: 40px;
    width: 610px;
    border: 1px solid #e6e6e6;
    position: absolute;
    top: 10px;
    z-index: 9;
    left: 10px;
    background: #FAFAFA;
    .icon{
      font-size: 20px;
      margin-left: -8px;
    }
  }
  .editor-outline{
    width: 200px;
    height: 200px;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 9999;
    border: 1px solid #e6e6e6;
    .header{
      line-height: 30px;
      font-size: 14px;
      padding: 0 10px;
      background: #ffffff;
    }
  }
}
  .geDiagramContainer{
    height:100%;
    width:100%;
    outline: none;
  }
  .je-editor-draw-sidebar{
    height: 100%;
    overflow: auto;
  }

  
  .geEditor {
    font-family:Helvetica,Arial,sans-serif;
    font-size:14px;
    border:none;
    margin:0px;
  }
  .geEditor input[type=text]::-ms-clear {
    display: none;
  }
  .geEditor input, select, textarea, button {
         font-size: inherit;
  }
  .geEditor input {
         border-width: 2px;
  }
  .geEditor select {
         border-width: 1px;
  }
  .geEditor div.mxTooltip {
    background: whiteSmoke;
    border-color: lightGray;
    font-size: 11px;
    color: black;
    padding:6px;
  }
  .geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel {
    cursor:pointer !important;
  }
  .geSidebarContainer .geTitle {
    cursor:default !important;
  }
  .geBackgroundPage {
      box-shadow:0px 0px 2px 1px #d1d1d1;
      //display: none;
  }
  .geSidebarContainer a, .geMenubarContainer a, .geToolbar a {
    color:#000000;
    text-decoration:none;
  }
  .geMenubarContainer, .geToolbarContainer, .geDiagramContainer, .geSidebarContainer, .geFooterContainer, .geHsplit, .geVsplit {
    overflow:hidden;
    position:absolute;
    cursor:default;
  }
  .geFormatContainer {
    overflow-x:hidden !important;
    overflow-y:auto !important;
    font-size:12px;
    border-left:1px solid #dadce0;
  }
  .geSidebarFooter {
    border-top:1px solid #dadce0;
  }
  .geFormatSection {
    border-bottom:1px solid #dadce0;
    border-color:#dadce0;
  }
  .geDiagramContainer {
    background-color:#ffffff;
    font-size:0px;
    outline:none;
    //background-image: url();
  }
  .geMenubar, .geToolbar {
    white-space:nowrap;
    display:block;
    width:100%;
  }
  .geMenubarContainer .geItem, .geToolbar .geButton, .geToolbar .geLabel, .geSidebar, .geSidebarContainer .geTitle, .geSidebar .geItem, .mxPopupMenuItem {
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
  }
  .geHint {
    background-color: #ffffff;
    border: 1px solid gray;
    padding: 4px 16px 4px 16px;
    border-radius:3px;
    -webkit-box-shadow: 1px 1px 2px 0px #ddd;
    -moz-box-shadow: 1px 1px 2px 0px #ddd;
    box-shadow: 1px 1px 2px 0px #ddd;
    opacity:0.8;
    filter:alpha(opacity=80);
    font-size:9pt;
  }
  .geStatusAlert {
    white-space:nowrap;
    margin-top:-5px;
    font-size:12px;
    padding:4px 6px 4px 6px;
    background-color:#f2dede;
    border:1px solid #ebccd1;
    color:#a94442 !important;
    border-radius:3px;
  }
  .geStatusAlert:hover {
    background-color:#f1d8d8;
    border-color:#d6b2b8;
  }
  .geStatusMessage {
    white-space:nowrap;
    margin-top:-5px;
    padding:4px 6px 4px 6px;
    font-size:12px;
    background: -webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
      background: -o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);
      background: -webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));
      background: linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
      background-repeat: repeat-x;
      border:1px solid #b2dba1;
    border-radius:3px;
    color:#3c763d !important;
  }
  .geAlert {
    position:absolute;
    white-space:nowrap;
    padding:14px;
    background-color:#f2dede;
    border:1px solid #ebccd1;
    color:#a94442;
    border-radius:3px;
    -webkit-box-shadow: 2px 2px 3px 0px #ddd;
    -moz-box-shadow: 2px 2px 3px 0px #ddd;
    box-shadow: 2px 2px 3px 0px #ddd;
  }
  .geBtn, .mxWindow .geBtn {
    background-image: none;
    background-color: #f5f5f5;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    color: #333;
    cursor: default;
    font-size: 13px;
    font-weight: 500;
    letter-spacing:0.25px;
    height: 29px;
    line-height: 27px;
    margin: 0 0 0 8px;
    min-width: 72px;
    outline: 0;
    padding: 0 8px;
    cursor: pointer;
  }
  .geBtn:hover, .geBtn:focus {
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    border: 1px solid #c6c6c6;
    background-color: #f8f8f8;
    background-image: linear-gradient(#f8f8f8 0px,#f1f1f1 100%);
    color: #111;
  }
  .geBtn:active, .geStatus:active {
    opacity: .7;
  }
  .geBtn:disabled {
    opacity: .5;
  }
  .geToolbarContainer > .geToolbar > div > a:active {
    opacity:0.5;
  }
  .geBtnUp {
    background-image: url();
    //_background-image: url(up.gif);
    background-position: center center;
    background-repeat: no-repeat;
  }
  .geBtnUp:active {
    background-color: #4d90fe;
    background-image: linear-gradient(#4d90fe 0px,#357ae8 100%);
  }
  .geBtnDown {
    background-image: url();
   // _background-image: url(down.gif);
    background-position: center center;
    background-repeat: no-repeat;
  }
  .geBtnDown:active {
    background-color: #4d90fe;
    background-image: linear-gradient(#4d90fe 0px,#357ae8 100%);
  }
  .geColorBtn {
    background-color: #f5f5f5;
    background-image: linear-gradient(#f5f5f5 0px,#e1e1e1 100%);
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.5);
    color: #333;
    cursor: default;
    margin: 0px;
    outline: 0;
    padding: 0px;
    cursor: pointer;		
  }
  .geColorBtn:hover {
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.7);
  }
  .geColorBtn:active {
    background-color: #4d90fe;
    background-image: linear-gradient(#4d90fe 0px,#357ae8 100%);
    border: 1px solid #2f5bb7;
    color: #fff;
  }
  .geColorBtn:disabled {
    opacity: .5;
  }
  .gePrimaryBtn, .mxWindow .gePrimaryBtn {
    background-color: #4d90fe;
    background-image: linear-gradient(#4d90fe 0px,#4787ed 100%);
    border: 1px solid #3079ed;
    color: #fff;
  }
  .gePrimaryBtn:hover, .gePrimaryBtn:focus {
    background-color: #357ae8;
    background-image: linear-gradient(#4d90fe 0px,#357ae8 100%);
    border: 1px solid #2f5bb7;
    color: #fff;
  }
  .gePrimaryBtn:disabled {
    opacity: .5;
  }
  .geAlertLink {
    color:#843534;
    font-weight:700;
    text-decoration:none;
  }
  .geActivePage {
    font-weight:bold;
    color:#188038 !important;
  }
  .geMenubarContainer, .geToolbarContainer, .geHsplit, .geVsplit {
    background-color:#fbfbfb;
  }
  .geMenubar {
    padding:0px 2px 0px 2px;
    vertical-align:middle;
  }
  .geMenubarContainer .geItem, .geToolbar .geItem {
    padding:6px 6px 6px 9px;
    cursor:default;
  }
  .geMenubarContainer .geItem:hover {
    background: #eee;
    border-radius:2px;	
  }
  .geMenubarContainer .geItem:active {
    background: #F8C382;
  }
  .geToolbarContainer .geButton:hover {
    opacity:1;
    _filter:none !important;
    background: #eee;
    border-radius:2px;
  }
  .geToolbarContainer .geButton:active, .geToolbarContainer .geLabel:active {
    background: #F8C382;
  }
  .geToolbarContainer .geLabel:hover {
    background: #eee;
    border-radius:2px;
  }
  .geToolbarButton {
    opacity: 0.6;
  }
  .geToolbarButton:active {
    opacity: 0.2;
  }
  .mxDisabled:hover {
    background:inherit !important;
  }
  .geMenubar a.geStatus {
    color:#888888;
    padding-left:12px;
    display:inline-block;
    cursor:default !important;
  }
  .geMenubar a.geStatus:hover {
    background:transparent;
  }
  .geToolbarContainer {
    border-bottom:1px solid #dadce0;
  }
  .geSidebarContainer .geToolbarContainer {
    background:transparent;
    border-bottom:none;
  }
  .geSidebarContainer button {
    text-overflow:ellipsis;
    overflow:hidden;
  }
  .geToolbar {
    padding:1px 0px 0px 6px;
    border-top:1px solid #dadce0;
    -webkit-box-shadow: inset 0 1px 0 0 #fff;
    -moz-box-shadow: inset 0 1px 0 0 #fff;
    box-shadow: inset 0 1px 0 0 #fff;
    padding-top:5px;
  }
  .geToolbarContainer .geSeparator {
    float:left;
    width:1px;
    height:20px;
    background:#e5e5e5;
    margin-left:6px;
    margin-right:6px;
    margin-top:4px;
  }
  .geToolbarContainer .geButton {
    float:left;
    width:20px;
    height:20px;
    padding:0px 2px 4px 2px;
    margin:2px;
    border:1px solid transparent;
    cursor:pointer;
    opacity:0.6;
    _filter:alpha(opacity=60);
  }
  div.mxWindow .geButton {
    margin: -1px 2px 2px 2px;
    padding: 1px 2px 2px 1px;
  }
  .geToolbarContainer .geLabel {
    float:left;
    margin:2px;
    cursor:pointer;
    padding:3px 5px 3px 5px;
    border:1px solid transparent;
  }
  .geToolbarContainer .mxDisabled:hover {
    border:1px solid transparent !important;
    opacity:0.2 !important;
    filter:alpha(opacity=20) !important;
  }
  .geDiagramBackdrop {
    background-color: #f8f9fa;
  }
  .geSidebarContainer {
    background:#fbfbfb;
    overflow:hidden;
    position:absolute;
    overflow:auto;
  }
  .geTabContainer {
    border-top:1px solid #e5e5e5;
    background-color:#f1f3f4;
  }
  .geSidebar {
    border:0 !important;
    padding:6px;
    padding-left:10px;
    padding-bottom:6px;
  }
  .geSidebarContainer .geTitle {
    display:block;
    font-size:13px;
    border-bottom:1px solid #e5e5e5;
    font-weight:500;
    padding:8px 0px 8px 14px;
    margin:0px;
    cursor:default;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.4em;
  }
  .geSidebarContainer .geTitle:hover {
    background: #eee;
    border-radius:2px;
  }
  .geSidebarContainer .geTitle:active {
    background-color:#F8C382;
  }
  .geSidebarContainer .geDropTarget {
    border-radius:10px;
    border:2px dotted #b0b0b0;
    text-align:center;
    padding:6px;
    margin:6px;
    color:#a0a0a0;
    fontSize:13px;
  }
  .geTitle img {
    opacity:0.5;
    _filter:alpha(opacity=50);	
  }
  .geTitle img:hover {
    opacity:1;
    _filter:alpha(opacity=100);
  }
  .geTitle .geButton {
    border:1px solid transparent;
    padding:3px;
    border-radius:2px;
  }
  .geTitle .geButton:hover {
    border:1px solid gray;
  }
  .geSidebar .geItem {
    display:inline-block;
    background-repeat:no-repeat;
    background-position:50% 50%;
    border-radius: 8px;
    margin:2px 14px;
  }
  .geSidebar .geItem:hover {
    background-color:#e0e0e0;
  }
  .geItem {
    vertical-align: top;
    display: inline-block;
    margin:2px 14px;
  }
  .geSidebarTooltip {
    position:absolute;
    background:#fbfbfb;
    overflow:hidden;
    box-shadow:0 2px 6px 2px rgba(60,64,67,.15);
    border-radius:6px;
    _filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');
  }
  .geFooterContainer {
    background:#e5e5e5;
    border-top:1px solid #c0c0c0;
  }
  .geFooterContainer a {
    display:inline-block;
    box-sizing:border-box;
    width:100%;
    white-space:nowrap;
    font-size:14px;
    color:#235695;
    font-weight:bold;
    text-decoration:none;
  }
  .geFooterContainer table {
    border-collapse:collapse;
    margin:0 auto;
  }
  .geFooterContainer td {
    border-left:1px solid #c0c0c0;
    border-right:1px solid #c0c0c0;
  }
  .geFooterContainer td:hover {
    background-color: #b3b3b3;
  }
  .geHsplit {
    cursor:col-resize;
    background-image:url();
    //_background-image:url('thumb_vertical.png');
    background-repeat:no-repeat;
    background-position:center center;
  }
  .geVsplit {
    font-size:1pt;
    cursor:row-resize;
    background-image:url();
    //_background-image:url('thumb_horz.png');
    background-repeat:no-repeat;
    background-position:center center;
  }
  .geHsplit {
    border-left:1px solid #e5e5e5;
    border-right:1px solid #e5e5e5;
  }
  .geVSplit {
    border-top:1px solid #e5e5e5;
    border-bottom:1px solid #e5e5e5;
  }
  .geHsplit:hover, .geVsplit:hover {
    background-color:#e0e0e0;
  }
  .geDialog {
    position:absolute;
    background:white;
    line-height:1em;
    overflow:hidden;
    padding:30px;
    border:1px solid #acacac;
    -webkit-box-shadow:0px 0px 2px 2px #d5d5d5;
    -moz-box-shadow:0px 0px 2px 2px #d5d5d5;
    box-shadow:0px 0px 2px 2px #d5d5d5;
    _filter:progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color='#d5d5d5', Positive='true');
    z-index: 2;
  }
  .geTransDialog {
    position:absolute;
    overflow:hidden;
    padding:30px;
    z-index: 2;
  }
  .geDialogClose {
    position:absolute;
    width:9px;
    height:9px;
    opacity:0.5;
    cursor:pointer;
    _filter:alpha(opacity=50);
  }
  .geDialogClose:hover {
    opacity:1;
  }
  .geDialogTitle {
    box-sizing:border-box;
    white-space:nowrap;
    background:rgb(229, 229, 229);
    border-bottom:1px solid rgb(192, 192, 192);
    font-size:15px;
    font-weight:bold;
    text-align:center;
    color:rgb(35, 86, 149);
  }
  .geDialogFooter {
    background:whiteSmoke;
    white-space:nowrap;
    text-align:right;
    box-sizing:border-box;
    border-top:1px solid #e5e5e5;
    color:darkGray;
  }
  .geSprite {
    background:url('') no-repeat;
   // _background:url('sprites.png') no-repeat top left;
    width:21px;
    height:21px;
  }
  .geBaseButton {
    padding:10px;
    border-radius:6px;
    border:1px solid #c0c0c0;
    cursor:pointer;
    background-color:#ececec;
    background-image:linear-gradient(#ececec 0%, #fcfcfc 100%);
  }
  .geBaseButton:hover {
    background:#ececec;
  }
  .geBigButton {
    color:#ffffff;
    border: none;
    padding:4px 10px;
    font-size:14px;
    white-space: nowrap;
    border-radius:3px;
    background-color:#0052cc;
    currsor:pointer;
    transition: background-color 0.1s ease-out;
    overflow:hidden;
    text-overflow: ellipsis;
  }
  .geBigButton:hover {
    background-color:#0065ff;
  }
  .geBigButton:active {
    background-color:#0747a6;
  }
  html body .geBigStandardButton {
    color: #344563;
    background-color: rgba(9, 30, 66, 0.08);
  }
  html body .geBigStandardButton:hover {
    background-color: rgba(9, 30, 66, 0.13);
  }
  html body .geBigStandardButton:active {
    background-color: #F8C382;
    color: #600000;
  }
  @media print {
    div.geNoPrint { display: none !important; }
  }
  .geSprite-actualsize { background-position: 0 0; }
  .geSprite-bold { background-position: 0 -46px; }
  .geSprite-bottom { background-position: 0 -92px; }
  .geSprite-center { background-position: 0 -138px; }
  .geSprite-delete { background-position: 0 -184px; }
  .geSprite-fillcolor { background-position: 0 -229px; }
  .geSprite-fit { background-position: 0 -277px; }
  .geSprite-fontcolor { background-position: 0 -322px; }
  .geSprite-gradientcolor { background-position: 0 -368px; }
  .geSprite-image { background-position: 0 -414px; }
  .geSprite-italic { background-position: 0 -460px; }
  .geSprite-left { background-position: 0 -505px; }
  .geSprite-middle { background-position: 0 -552px; }
  .geSprite-print { background-position: 0 -598px; }
  .geSprite-redo { background-position: 0 -644px; }
  .geSprite-right { background-position: 0 -689px; }
  .geSprite-shadow { background-position: 0 -735px; }
  .geSprite-strokecolor { background-position: 0 -782px; }
  .geSprite-top { background-position: 0 -828px; }
  .geSprite-underline { background-position: 0 -874px; }
  .geSprite-undo { background-position: 0 -920px; }
  .geSprite-zoomin { background-position: 0 -966px; }
  .geSprite-zoomout { background-position: 0 -1012px; }
  .geSprite-arrow { background-position: 0 -1059px; }
  .geSprite-linkedge { background-position: 0 -1105px; }
  .geSprite-straight { background-position: 0 -1150px; }
  .geSprite-entity { background-position: 0 -1196px; }
  .geSprite-orthogonal { background-position: 0 -1242px; }
  .geSprite-curved { background-position: 0 -1288px; }
  .geSprite-noarrow { background-position: 0 -1334px; }
  .geSprite-endclassic { background-position: 0 -1380px; }
  .geSprite-endopen { background-position: 0 -1426px; }
  .geSprite-endblock { background-position: 0 -1472px; }
  .geSprite-endoval { background-position: 0 -1518px; }
  .geSprite-enddiamond { background-position: 0 -1564px; }
  .geSprite-endthindiamond { background-position: 0 -1610px; }
  .geSprite-endclassictrans { background-position: 0 -1656px; }
  .geSprite-endblocktrans { background-position: 0 -1702px; }
  .geSprite-endovaltrans { background-position: 0 -1748px; }
  .geSprite-enddiamondtrans { background-position: 0 -1794px; }
  .geSprite-endthindiamondtrans { background-position: 0 -1840px; }
  .geSprite-startclassic { background-position: 0 -1886px; }
  .geSprite-startopen { background-position: 0 -1932px; }
  .geSprite-startblock { background-position: 0 -1978px; }
  .geSprite-startoval { background-position: 0 -2024px; }
  .geSprite-startdiamond { background-position: 0 -2070px; }
  .geSprite-startthindiamond { background-position: 0 -2116px; }
  .geSprite-startclassictrans { background-position: 0 -2162px; }
  .geSprite-startblocktrans { background-position: 0 -2208px; }
  .geSprite-startovaltrans { background-position: 0 -2254px; }
  .geSprite-startdiamondtrans { background-position: 0 -2300px; }
  .geSprite-startthindiamondtrans { background-position: 0 -2346px; }
  .geSprite-globe { background-position: 0 -2392px; }
  .geSprite-orderedlist { background-position: 0 -2438px; }
  .geSprite-unorderedlist { background-position: 0 -2484px; }
  .geSprite-horizontalrule { background-position: 0 -2530px; }
  .geSprite-link { background-position: 0 -2576px; }
  .geSprite-indent { background-position: 0 -2622px; }
  .geSprite-outdent { background-position: 0 -2668px; }
  .geSprite-code { background-position: 0 -2714px; }
  .geSprite-fontbackground { background-position: 0 -2760px; }
  .geSprite-removeformat { background-position: 0 -2806px; }
  .geSprite-superscript { background-position: 0 -2852px; }
  .geSprite-subscript { background-position: 0 -2898px; }
  .geSprite-table { background-position: 0 -2944px; }
  .geSprite-deletecolumn { background-position: 0 -2990px; }
  .geSprite-deleterow { background-position: 0 -3036px; }
  .geSprite-insertcolumnafter { background-position: 0 -3082px; }
  .geSprite-insertcolumnbefore { background-position: 0 -3128px; }
  .geSprite-insertrowafter { background-position: 0 -3174px; }
  .geSprite-insertrowbefore { background-position: 0 -3220px; }
  .geSprite-grid { background-position: 0 -3272px; }
  .geSprite-guides { background-position: 0 -3324px; }
  .geSprite-dots { background-position: 0 -3370px; }
  .geSprite-alignleft { background-position: 0 -3416px; }
  .geSprite-alignright { background-position: 0 -3462px; }
  .geSprite-aligncenter { background-position: 0 -3508px; }
  .geSprite-aligntop { background-position: 0 -3554px; }
  .geSprite-alignbottom { background-position: 0 -3600px; }
  .geSprite-alignmiddle { background-position: 0 -3646px; }
  .geSprite-justifyfull { background-position: 0 -3692px; }
  .geSprite-formatpanel { background-position: 0 -3738px; }
  .geSprite-connection { background-position: 0 -3784px; }
  .geSprite-vertical { background-position: 0 -3830px; }
  .geSprite-simplearrow { background-position: 0 -3876px; }
  .geSprite-plus { background-position: 0 -3922px; }
  .geSprite-rounded { background-position: 0 -3968px; }
  .geSprite-toback { background-position: 0 -4014px; }
  .geSprite-tofront { background-position: 0 -4060px; }
  .geSprite-duplicate { background-position: 0 -4106px; }
  .geSprite-insert { background-position: 0 -4152px; }
  .geSprite-endblockthin { background-position: 0 -4201px; }
  .geSprite-endblockthintrans { background-position: 0 -4247px; }
  .geSprite-enderone { background-position: 0 -4293px; }
  .geSprite-enderonetoone { background-position: 0 -4339px; }
  .geSprite-enderonetomany { background-position: 0 -4385px; }
  .geSprite-endermany { background-position: 0 -4431px; }
  .geSprite-enderoneopt { background-position: 0 -4477px; }
  .geSprite-endermanyopt { background-position: 0 -4523px; }
  .geSprite-endclassicthin { background-position: 0 -4938px; }
  .geSprite-endclassicthintrans { background-position: 0 -4984px; }
  .geSprite-enddash { background-position: 0 -5029px; }
  .geSprite-endcircleplus { background-position: 0 -5075px; }
  .geSprite-endcircle { background-position: 0 -5121px; }
  .geSprite-endasync { background-position: 0 -5167px; }
  .geSprite-endasynctrans { background-position: 0 -5213px; }
  .geSprite-startblockthin { background-position: 0 -4569px; }
  .geSprite-startblockthintrans { background-position: 0 -4615px; }
  .geSprite-starterone { background-position: 0 -4661px; }
  .geSprite-starteronetoone { background-position: 0 -4707px; }
  .geSprite-starteronetomany { background-position: 0 -4753px; }
  .geSprite-startermany { background-position: 0 -4799px; }
  .geSprite-starteroneopt { background-position: 0 -4845px; }
  .geSprite-startermanyopt { background-position: 0 -4891px; }
  .geSprite-startclassicthin { background-position: 0 -5259px; }
  .geSprite-startclassicthintrans { background-position: 0 -5305px; }
  .geSprite-startdash { background-position: 0 -5351px; }
  .geSprite-startcircleplus { background-position: 0 -5397px; }
  .geSprite-startcircle { background-position: 0 -5443px; }
  .geSprite-startasync { background-position: 0 -5489px; }
  .geSprite-startasynctrans { background-position: 0 -5535px; }
  .geSprite-startcross { background-position: 0 -5581px; }
  .geSprite-startopenthin { background-position: 0 -5627px; }
  .geSprite-startopenasync { background-position: 0 -5673px; }
  .geSprite-endcross { background-position: 0 -5719px; }
  .geSprite-endopenthin { background-position: 0 -5765px; }
  .geSprite-endopenasync { background-position: 0 -5811px; }
  .geSprite-verticalelbow { background-position: 0 -5857px; }
  .geSprite-horizontalelbow { background-position: 0 -5903px; }
  .geSprite-horizontalisometric { background-position: 0 -5949px; }
  .geSprite-verticalisometric { background-position: 0 -5995px; }
  .geSvgSprite {
    background-position: center center;
  }
  .geFlipSprite {
    transform:scaleX(-1);
  }
  .geSprite-box {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' transform='translate(0.5,0.5)'><rect stroke='black' fill='none' x='2' y='2' width='6' height='6'/><path stroke='black' d='M8 5 L 18 5'/></svg>");
  }
  .geSprite-halfCircle {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='10' transform='translate(0.5,0.5)'><path stroke='black' fill='none' d='M 2 2 Q 6 2 6 5 Q 6 8 2 8 M 6 5 L 18 5'/></svg>");
  }
  html div.mxRubberband {
    border-color:#0000DD;
    background:#99ccff;
  }
  td.mxPopupMenuIcon div {
    width:16px;
    height:16px;
  }
  .geEditor div.mxPopupMenu {
    box-shadow:0 2px 6px 2px rgba(60,64,67,.15);
    background:white;
    border-radius:4px;
    border:none;
    padding:3px;
  }
  html table.mxPopupMenu {
    border-collapse:collapse;
    margin:0px;
  }
  html td.mxPopupMenuItem {
    padding:7px 30px 7px 30px;
    font-family:Helvetica Neue,Helvetica,Arial Unicode MS,Arial;
    font-size:10pt;
  }
  html td.mxPopupMenuIcon {
    background-color:white;
    padding:0px;
  }
  td.mxPopupMenuIcon .geIcon {
    padding:2px;
    padding-bottom:4px;
    margin:2px;
    border:1px solid transparent;
    opacity:0.5;
    _width:26px;
    _height:26px;
  }
  td.mxPopupMenuIcon .geIcon:hover {
    border:1px solid gray;
    border-radius:2px;
    opacity:1;
  }
  html tr.mxPopupMenuItemHover {
    background-color: #eeeeee;
    color: black;
  }
  table.mxPopupMenu hr {
    color:#cccccc;
    background-color:#cccccc;
    border:none;
    height:1px;
  }
  table.mxPopupMenu tr {
    font-size:4pt;
  }
  html td.mxWindowTitle {
    font-family:Helvetica Neue,Helvetica,Arial Unicode MS,Arial;
     text-align:left;
     font-size:12px;
     color:rgb(112, 112, 112);
     padding:4px;
  }
  .gePropHeader, .gePropRow {
    border: 1px solid #e9e9e9;	
  }
  .gePropRowDark {
    border: 1px solid #4472C4;
  }
  .gePropHeader>.gePropHeaderCell {
      border-top: 0;
      border-bottom: 0;
      text-align: left;
    width: 50%;
  }
  .gePropHeader>.gePropHeaderCell:first-child {
      border-left: none;
  }
  .gePropHeader>.gePropHeaderCell:last-child {
      border-right: none;
  }
  .gePropHeader {
      background: #e5e5e5;
      color: black;
  }
  .gePropRowCell {
      border-left: 1px solid #f3f3f3;
      width: 50%;
  }
  .gePropRow>.gePropRowCell {
      background: #fff;
  }
  .gePropRowAlt>.gePropRowCell {
      background: #fcfcfc;
  }
  .gePropRowDark>.gePropRowCell {
      background: #fff;
      color: #305496;
      font-weight: bold;
  }
  .gePropRowDarkAlt>.gePropRowCell {
      background: #D9E1F2;
      color: #305496;
      font-weight: bold;
  }
  .gePropEditor input:invalid {
    border: 1px solid red;
  }
  /* Templates dialog css */
  .geTemplateDlg {
    width: 987px;
    height: 712px;
  }
  .geTemplateDlg ::-webkit-scrollbar {
      width:12px;
      height:12px;
  }
  .geTemplateDlg ::-webkit-scrollbar-track {
    background:whiteSmoke;
    -webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.1);
  }
  .geTemplateDlg ::-webkit-scrollbar-thumb {
    background:#c5c5c5;
      border-radius:10px;
    border:whiteSmoke solid 3px;
  }
  .geTemplateDlg ::-webkit-scrollbar-thumb:hover {
    background:#b5b5b5;
  }
  
  .geTempDlgHeader {
    box-sizing: border-box;
    height: 62px;
    width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 5px 5px 0 0;
    background-color: #F5F5F5;
  }
  .geTempDlgHeaderLogo {
    height: 34px;
    margin: 14px 14px 14px 20px;
  }
  .geTempDlgSearchBox {
      color:#888888;
      //background:url("/images/icon-search.svg") no-repeat;
    background-color: #FFFFFF;
    background-position: 15px;
    height: 40px;
    width: 40%;
    max-width: 400px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
      float:right;
      font-family:Arial,Helvetica,sans-serif;
      font-size:15px;
      line-height:36px;
      margin: 11px 36px 0 0;
      outline:medium none;
      padding:0 0 0 36px;
      text-shadow:1px 1px 0 white;
  }
  .geTemplatesList {
    box-sizing: border-box;
    float: left;
    height: calc(100% - 118px);
    width: 20%;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    display: inline-block;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .geTempDlgContent {
    box-sizing: border-box;
    float: right;
    height: calc(100% - 118px);
    width: 80%;
    border: 1px solid #CCCCCC;
    background-color: #FFFFFF;
    display: inline-block;
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
  }
  .geTempDlgFooter {
    box-sizing: border-box;
    height: 52px;
    width: 100%;
    border: 1px solid #CCCCCC;
    border-radius: 0 0 5px 5px;
    background-color: #F5F5F5;
    text-align: right;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    padding-top: 11px;
  }
  .geTempDlgCreateBtn {
    display: inline-block;
    width: 67px;
      border-radius: 3px;
      background-color: #3D72AD;
      padding: 6px;
      text-align: center;
      color: #fff;
      cursor: pointer;
  }
  .geTempDlgCancelBtn {
    display: inline-block;
    width: 67px;
      padding: 6px;
      text-align: center;
      color: #3D72AD;
      cursor: pointer;
  }
  .geTempDlgCancelBtn:active, .geTempDlgCreateBtn:active, .geTempDlgShowAllBtn:active {
    transform: translateY(2px);
  }
  .geTempDlgCreateBtnDisabled {
      background-color: #9fbddd;
  }
  .geTempDlgCreateBtnDisabled:active {
      transform: translateY(0px);
  }
  
  .geTempDlgCreateBtnBusy {
   // background-image: url(/images/aui-wait.gif);
      background-repeat: no-repeat;
      background-position: 62px 7px;
  }
  
  
  .geTempDlgNewDiagramlbl {
    height: 17px;
    color: #333333;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    padding: 25px 0 0 20px;
    cursor: pointer;
  }
  .geTempDlgHLine {
    height: 1px;
    width: calc(100% - 22px);
    background-color: #CCCCCC;
    margin: 20px 0 0 11px;
  }
  .geTemplatesLbl {
    height: 17px;
    color: #6D6D6D;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    text-transform: uppercase;
    margin: 20px 0 3px 20px;
  }
  .geTemplateCatLink {
    height: 17px;
    color: #3D72AD;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    margin: 12px 0 0 20px;
    cursor: pointer;
  }
  .geTempDlgNewDiagramCat {
    height: 280px;
    width: 100%;
    background-color: #555555;
  }
  .geTempDlgNewDiagramCatLbl {
    height: 17px;
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    padding: 25px 0 0 20px;
    text-transform: uppercase;
  }
  .geTempDlgNewDiagramCatList {
    width: 100%;
    height: 190px;
    padding-left: 9px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden; 
  }
  .geTempDlgNewDiagramCatFooter {
    width: 100%;
  }
  .geTempDlgShowAllBtn {
    width: 78px;
    border: 1px solid #777777;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    color: #DDDDDD;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    padding: 4px;
    float: right;
    margin-right: 30px;
  }
  .geTempDlgNewDiagramCatItem {
    height: 155px;
    width: 134px;
    padding: 18px 6px 0 9px;
    display: inline-block;
  }
  
  .geTempDlgNewDiagramCatItemImg {
    box-sizing: border-box;
    height: 134px;
    width: 134px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background-color: #FFFFFF;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    cursor: pointer;
  }
  
  .geTempDlgNewDiagramCatItemActive > .geTempDlgNewDiagramCatItemImg {
    border: 4px solid #3D72AD;
  }
  
  .geTempDlgNewDiagramCatItemLbl {
    height: 17px;
    width: 100%;
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    padding-top: 4px;
    cursor: pointer;
  }
  
  .geTempDlgDiagramsList {
    box-sizing: border-box;
    width: 100%;
    min-height: calc(100% - 280px);
    padding-left: 9px;
    box-sizing: border-box;
    background-color: #E5E5E5;
  }
  
  .geTempDlgDiagramsListHeader {
    width: 100%;
      height: 45px;
    padding: 18px 20px 0 11px;
    box-sizing: border-box;
  }
  .geTempDlgDiagramsListTitle {
    box-sizing: border-box;
    height: 17px;
    color: #666666;
    font-family: Helvetica;
    font-size: 14px;
    font-weight: bold;
    line-height: 17px;
    text-transform: uppercase;
    padding-top: 5px;
    display: inline-block;
  }
  .geTempDlgDiagramsListBtns {
    float: right;
    margin-top: -9px;
  }		
  .geTempDlgRadioBtn {
    box-sizing: border-box;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background-color: #555555;
    display: inline-block;
    color: #FFFFFF;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    padding: 4px;
    cursor: pointer;
  }
  .geTempDlgRadioBtnActive {
    background-color: #FFFFFF;
    color: #333333;
  }
  .geTempDlgRadioBtnLarge {
    height: 27px;
    width: 120px;
  }
  /* TODO is there a better way for these buttons */
  .geTempDlgRadioBtnSmall {
    position: relative;
    top: 9px;
    height: 27px;
    width: 27px;
  }
  .geTempDlgRadioBtnSmall img {
    position: absolute;
    top: 6px;
    left: 6px;
    height: 13px;
    width: 13px;
  }
  .geTempDlgSpacer {
      display: inline-block;
    width: 10px;
  }
  
  .geTempDlgDiagramsListGrid {
    width: 100%;
    white-space: nowrap;
    font-size: 13px;
    padding: 0px 20px 20px 10px;
      box-sizing: border-box;
      border-spacing: 0;
  }
  
  .geTempDlgDiagramsListGrid tr {
    height: 40px;
  }
  
  .geTempDlgDiagramsListGrid th {
    background-color: #E5E5E5;
    color: #8E8E8E;
    font-weight: bold;
    text-align: left;
    padding: 5px;
    border-bottom: 1px solid #CCCCCC;
    font-size: 14px;
  }
  
  .geTempDlgDiagramsListGrid td {
    background-color: #FFFFFF;
    color: #888888;
    padding: 5px;
    border-bottom: 1px solid #CCCCCC;
    overflow: hidden;
  }
  
  .geTempDlgDiagramsListGridActive td {
    border-bottom: 2px solid #3D72AD;
    border-top: 2px solid #3D72AD;
  }
  
  .geTempDlgDiagramsListGridActive td:first-child  {
    border-left: 2px solid #3D72AD;
  }
  
  .geTempDlgDiagramsListGridActive td:last-child  {
    border-right: 2px solid #3D72AD;
  }
  
  .geTempDlgDiagramTitle {
    font-weight: bold;
    color: #666666 !important;
  }
  
  .geTempDlgDiagramsTiles {
    position: relative;
    min-height: 100px;
  }
  
  .geTempDlgDiagramTile {
    height: 152px;
    width: 130px;
    padding: 20px 7px 0 10px;
    display: inline-block;
    position: relative;
  }
  
  .geTempDlgDiagramTileImg {
    box-sizing: border-box;
    height: 130px;
    width: 130px;
    border: 1px solid #CCCCCC;
    border-radius: 3px;
    background-color: #FFFFFF;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
  }
  
  .geTempDlgDiagramTileImgLoading {
   // background-image: url(/images/aui-wait.gif);
      background-repeat: no-repeat;
      background-position: center;
  }
  
  .geTempDlgDiagramTileImgError {
  //  background-image: url(/images/broken.png);
      background-repeat: no-repeat;
      background-position: center;
      background-color: #be3730;
  }
  
  .geTempDlgDiagramTileImg img{
    max-width: 117px;
      max-height: 117px;
      cursor: pointer;
  }
  
  .geTempDlgDiagramTileActive > .geTempDlgDiagramTileImg{
    border: 4px solid #3D72AD;
  }
  
  .geTempDlgDiagramTileLbl {
    height: 17px;
    width: 100%;
    color: #333333;
    font-family: Helvetica;
    font-size: 14px;
    line-height: 17px;
    text-align: center;
    padding-top: 5px;
    cursor: pointer;
  }
  
  .geTempDlgDiagramPreviewBtn {
    position: absolute;
    top: 28px;
    right: 15px;
    cursor: pointer;
  }
  
  .geTempDlgDiagramListPreviewBtn {
    cursor: pointer;
    padding-left: 5px;
    padding-right: 15px;
  }
  
  .geTempDlgDiagramPreviewBox {
    position: absolute;
      top: 3%;
      left: 10%;
      width: 80%;
      height: 94%;
      background: white;
      border: 4px solid #3D72AD;
      border-radius: 6px;
      box-sizing: border-box;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
      z-index: 2;
  }
  
  .geTempDlgDialogMask {
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
  }
  
  .geTempDlgDiagramPreviewBox img {
    max-width: 95%;
      max-height: 95%;
      vertical-align: middle;
  }
  
  .geTempDlgPreviewCloseBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
  }
  
  .geTempDlgLinkToDiagramHint {
    color: #555;
  }
  
  .geTempDlgLinkToDiagramBtn {
    color: #555;
      margin: 0 10px 0 10px;
      height: 27px;
      font-size: 14px;
  }
  /* Comments CSS */
  .geCommentsWin {
    user-select: none;
    border: 1px solid whiteSmoke;
    height: 100%;
    margin-bottom: 10px;
    overflow: auto;	
  }
  
  .geCommentsToolbar {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    overflow: hidden;
    border-width: 1px 0px 0px 0px;
    border-color: #c3c3c3;
    border-style: solid;
    display: block;
    white-space: nowrap;
  }
  
  .geCommentsList {
    position: absolute;
    overflow: auto;
    left: 0px;
    right: 0px;
    top: 0px;	
  }
  
  .geCommentContainer {
    position: relative;
    padding: 12px;
    margin: 5px;
    min-height: 50px;
    display: block;
    background-color: white;
    border-width: 0px 0px 1px 0px;
    border-color: #c3c3c3;
    border-style: solid;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 2px 2px 6px rgba(60,64,67,.15);
    color: #3C4043;
  }
  
  .geCommentHeader {
    width: 100%;
    height: 32px;
  }
  
  .geCommentUserImg {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    float: left;
    background-color: whitesmoke;
  }
  
  .geCommentHeaderTxt {
    overflow: hidden;
    height: 32px;
    padding-left: 5px;
  }
  
  .geCommentUsername {
    overflow: hidden;
    height: 18px;
    font-size: 15px;
    font-weight: bold;
    text-overflow: ellipsis;
  }
  
  .geCommentDate {
    color: #707070;
    overflow: hidden;
    height: 14px;
    font-size: 11px;
    text-overflow: ellipsis;
  }
  
  .geCommentDate::first-letter {
      text-transform: uppercase;
  }
  
  .geCommentTxt {
    font-size: 14px;
      padding-top: 5px;
      white-space: normal;
      min-height: 12px;
  }
  
  .geCommentEditTxtArea {
      margin-top: 5px;
      font-size: 14px !important;
      min-height: 12px;
      max-width: 100%;
      min-width: 100%;
    width: 100%;
      box-sizing: border-box;
  }
  
  .geCommentEditBtns {
    width: 100%;
      box-sizing: border-box;
      padding-top: 5px;
      height: 20px;
  }
  
  .geCommentEditBtn {
    padding: 3px 8px 3px 8px !important;
      float: right !important;
      margin-left: 5px;
  }
  
  .geCommentActions {
    color: #707070;
    font-size: 12px;
  }
  
  .geCommentActionsList {
    list-style-type: disc;
    margin: 0px;
    padding: 10px 0 0 0;
  }
  
  .geCommentAction {
    display: inline-block;
      padding: 0;
  }
  
  .geCommentAction:before {
    content: "\2022";
    padding: 5px;
  } 
  
  .geCommentAction:first-child:before {
    content: "";
    padding: 0;
  } 
  
  .geCommentActionLnk {
    cursor: pointer;
    color: #707070;
    text-decoration: none;
  }
  
  .geCommentActionLnk:hover {
    text-decoration: underline;
  }
  
  .geCheckedBtn {
    background-color: #ccc;
      border-top: 1px solid black !important;
      border-left: 1px solid black !important;
  }
  
  .geCommentBusyImg {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  
  .geAspectDlgListItem 
  {
    width : 120px;
    height : 120px;
    display : inline-block;
    border: 3px solid #F0F0F0;
    border-radius: 5px;
    padding: 5px;
    margin : 2px 2px 20px 2px;
  }
  
  .geAspectDlgListItem:hover
  {
    border: 3px solid #c5c5c5;
  }
  
  .geAspectDlgListItemSelected 
  {
    border: 3px solid #3b73af;
  }
  
  .geAspectDlgListItemSelected:hover
  {
    border: 3px solid #405a86;
  }
  
  .geAspectDlgListItemText
  {
    text-overflow: ellipsis;
    max-width: 100%;
    min-height : 2em;
    overflow : hidden;
    text-align : center;
    margin-top : 10px;
  }
  
  .geAspectDlgList
  {
    min-height: 184px;
    white-space: nowrap;
    overflow-x : auto;
    overflow-y : hidden;
  }
}